<template>
	<view class="Frame">
		<view class="Top">
			 <up-navbar
			            title="修改密码"
			           @rightClick="rightClick"
			            :autoBack="true"
						bgColor="#00757F"
						title-color="#ffffff"
						leftIconColor="white"
			        >
			        </up-navbar>
		</view>
		<view class="Account">
			<view class="one">
				账号
			</view>
			<view class="text-one">
				123456789
			</view>
		</view>
		<view class="Verification-method">
			<view class="two">
				验证方式
			</view>
			<view class="circle">
				<svg t="1740148505604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4826" width="18" height="18"><path d="M512 65.98144c-245.91872 0-446.01856 200.09472-446.01856 446.01856 0 245.95456 200.064 446.01856 446.01856 446.01856s446.01856-200.064 446.01856-446.01856c0-245.91872-200.064-446.01856-446.01856-446.01856z m0 828.03712c-210.65728 0-382.01856-171.392-382.01856-382.01856 0-210.65728 171.36128-382.01856 382.01856-382.01856 210.62656 0 382.01856 171.36128 382.01856 382.01856 0 210.62656-171.392 382.01856-382.01856 382.01856z" p-id="4827" fill="#8a8a8a"></path></svg>
			</view>
			<view class="text-two">
				手机验证
			</view>
		</view>
		<view class="Verification-code">
			<view class="three">
				验证码
			</view>
			<view class="text-three">
				请输入验证码
			</view>
			<view class="Get-verification-code"> 获取验证码


			</view>
		</view>
		<view class="New-password">
			<view class="four">
				新密码
			</view>
			<view class="text-four">
				请输入密码
			</view>

		</view>
		<view class="Confirm-password">
			<view class="five">
				确认密码
			</view>
			<view class="text-five">
				请确认密码

			</view>
		</view>
		<view class="Prompt">
			<view class="text-six">
				密码需要长度不低于8位，需要包含大写字母、小写字母、数字
			</view>
		</view>
		<view class="Confirm-changes">
			<view class="text-seven">
				确认修改
			</view>
		</view>
	</view>

</template>

<script setup>
	import { onMounted, ref } from 'vue';
	
	const rightClick = () => {  
	    console.log('rightClick');  
	};  
	const options = ref({});
	// 在组件挂载时获取参数
	onMounted(() => {
	  const page = getCurrentPages().pop();
	  if (page && page.options) {
	    options.value = page.options;
	    console.log(options.value.id); // 打印出上个页面传递的参数
	    console.log(options.value.name); // 打印出上个页面传递的参数
	  }
	});
		
</script>

<style lang="scss" scoped>
	.Frame {
		height: 100%;
		width: 100%;
		position: absolute;
		background-color: whitesmoke;
		border: 1px solid whitesmoke
	}

	.Top {
	}
.arrow{
	position: absolute;
	top: 3%;
	left: 3%;
}
	.top-text {
		left: 38%;
		top: 3%;
		position: absolute;
		color: white;
		font-size: large;
	}

	.Account {
		height: 8%;
		width: 100%;
		background-color: white;
		position: absolute;
		top: 12%;
	}
.circle{
	position: absolute;
	left: 30%;
	top: 42%;
}
	.Verification-method {
		height: 8%;
		width: 100%;
		background-color: white;
		position: absolute;
		top: 20%;
		border: solid whitesmoke;
	}

	.Verification-code {
		height: 8%;
		width: 100%;
		background-color: white;
		position: absolute;
		top: 28%;
		border: solid whitesmoke;
	}

	.New-password {
		height: 8%;
		width: 100%;
		background-color: white;
		position: absolute;
		top: 36%;
		border: solid whitesmoke;
	}

	.Confirm-password {
		height: 8%;
		width: 100%;
		background-color: white;
		position: absolute;
		top: 44%;
		border: solid whitesmoke;
	}

	.Confirm-changes {
		height: 6%;
		width: 95%;
		background-color: #00757F;
		position: absolute;
		top: 60%;
		left: 2%;
		border-radius: 4px;
	}

	.text-seven {
		left: 39%;
		top: 24%;
		position: absolute;
		color: white;
		font-size: large;
	}

	.text-six {
		position: absolute;
		left: 3%;
		top: 53%;
		font-size: 12px;
	}

	.one {
		position: absolute;
		left: 3%;
		top: 36%;
		
	}

	.two {position: absolute;
		left: 3%;
		top: 36%;
		}

	.three {position: absolute;
		left: 3%;
		top: 36%;}

	.four {position: absolute;
		left: 3%;
		top: 36%;}

	.five {position: absolute;
		left: 3%;
		top: 36%;}

	.text-one {
		left: 30%;
		top: 36%;
		position:absolute;
		
	}

	.text-two {left: 32%;
		top: 36%;
		position:absolute;
	}

	.text-three {
		color: darkgray;
		left: 30%;
		top: 36%;
		position:absolute;
		
	}

	.Get-verification-code {
		color: #00757F;
		left: 74%;
		top: 36%;
		position:absolute;
		
	}

	.text-four {
		color: darkgray;
		left: 30%;
		top: 36%;
		position:absolute;
		
	}

	.text-five {
		color: darkgray;
		left: 30%;
		top: 36%;
		position:absolute;
	
	}
</style>